<!--  -->
<template>
  <div class="home">
    <el-container>
      <el-aside width="200px">
        <Nav></Nav>
      </el-aside>
      <el-container>
        <el-header>
          <Breadcrumb class="Breadcrumb"></Breadcrumb>
          <el-button class="exit" @click="goBack" type="primary"
            >退出</el-button
          ></el-header
        >
        <el-main>
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Nav from "./nav/Nav.vue";
import Breadcrumb from "./nav/Breadcrumb.vue";
export default {
  name: "Home",
  components: {
    Nav,
    Breadcrumb,
  },
  created () {
    let cookie = localStorage.getItem("cookie")
    if(!cookie){
      this.$router.push('/login')
    }
  },
  methods: {
    goBack() {
      this.$confirm("是否退出账号?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$router.push("/login");
          localStorage.clear("userinfo")
          this.$message({
            type: "success",
            message: "成功退出账号!",
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped>
.el-container .el-container{
  height: 100vh;
}
.el-container {
  padding: 0;
  margin: 0;
}
.el-container .el-aside {
  height: 100vh;
}
.el-header,
.el-footer {
  background-color: #f9f9f9;
  color: #333;
  text-align: center;
  line-height: 60px;
  display: flex;
  align-items: center;
}

.el-aside {
  background-color: #333f4f;
  color: #333;
  text-align: center;
}

.el-main {
  background-color: #fff;
  color: #333;
  /* height: 100vh - 60px; */
  /* overflow-y: scroll; */
}

.Breadcrumb {
  flex: 8;
  height: 60px;
  line-height: 60px;
}
.exit {
  height: 40px;
  width: 80px;
}
</style>